<template>
  <el-dialog v-model="dialogVisible" title="增加" width="500px" @close="dialogVisible = false">
    <el-form ref="formStateRef" :rules="formRules" :model="formState" label-width="80px">
      <el-form-item label="主体" prop="tradeFromId">
        <el-select v-model="formState.tradeFromId" placeholder="请选择">
          <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="tradeAt" class="all-time">
        <el-date-picker style="width:100%"  v-model="formState.tradeAt" type="date"/>
      </el-form-item>
      <el-form-item label="交易品种">
        <el-select v-model="formState.tradeClass" placeholder="请选择">
          <el-option v-for="item in tradeClassOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="交易类型">
        <el-select v-model="formState.tradeType" placeholder="请选择">
          <el-option v-for="item in formTradeTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="数量(t)">
        <el-input v-model="formState.amount" placeholder="请输入数字"/>
      </el-form-item>
      <el-form-item label="价格(元/t)">
        <el-input v-model="formState.unitPrice" placeholder="请输入数字"/>
      </el-form-item>
      <el-form-item label="交易对手">
        <el-input v-model="formState.tradeTo" placeholder="请输入"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="save" @click="changeSubmitFn(formPassRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import {reactive, getCurrentInstance, defineExpose, nextTick, ref} from 'vue';

  type FormInstance = InstanceType<typeof ElForm>;
  let dialogVisible = ref(false)
  const formRules = {
    /*    name: [
          {
            'required': true,
            'message': `请输入措施名称`,
            'trigger': `blur`
          }, {
            'max': 140,
            'message': `长度不能超过140字`,
            'trigger': `blur`
          }
        ]*/
  }
  const formStateRef = ref();
  let formState = reactive({
    'tradeFromId': ``,
    'tradeAt': ``,
    'tradeClass': ``,
    'tradeType': ``,
    'amount': ``,
    'unitPrice': ``,
    'tradeTo': ``,
  });

  const changeSubmitFn = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    /*formEl.validate(async valid => {
      if (valid) {

      }
    });*/
    dialogVisible.value = false
  }

  // 初始化方法
  const open = () => {
    dialogVisible.value = true
  };

  defineExpose({open})
</script>
<style lang="scss" scoped>
  .all-time{
    :deep{
      .el-input__wrapper{
        width:100%
      }
    }
  }
</style>